<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="1300px">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="子订单号" prop="order_sn">
				<el-input v-model="queryParams.order_sn" placeholder="子订单号" clearable />
			</el-form-item>
			<el-form-item label="用户昵称" prop="user_id">
				<el-select
					v-model="queryParams.user_id"
					filterable
					remote
					clearable
					placeholder="请输入选择用户"
					:remote-method="userIdRemoteMethod"
					:loading="userIdSelect.loading"
					@focus="onUserIdFocus"
				>
					<el-option v-for="item in userIdSelect.options" :key="item.id" :label="item.nickname" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
					v-model="queryParams.status"
					clearable
					placeholder="请选择状态"
				>
					<el-option label="全部" :value="0"></el-option>
					<el-option label="使用成功" :value="1"></el-option>
					<el-option label="使用失败" :value="2"></el-option>
					<el-option label="退回" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mt8 mb8">
			<el-col :span="1.5">
				<el-button @click="onExport" type="warning" plain icon="el-icon-download">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="用户ID" align="center" prop="user_id" />
			<el-table-column label="用户昵称" align="center" prop="user_name" />
			<el-table-column label="父订单号" align="center" prop="pay_sn" />
			<el-table-column label="子订单号" align="center" prop="order_sn" />
			<el-table-column label="最低消费" align="center" prop="money_full" />
			<el-table-column label="状态" align="center" prop="status" :formatter="formatterStatus" />
			<el-table-column label="使用状态" align="center" prop="status_use">
				<template #default="{ row }">
					{{ Number(row.residue_num) ? '未使用' : '已使用' }}
				</template>
			</el-table-column>
			<el-table-column label="下单时间" align="center" prop="order_time" :formatter="formatterOrderTime" />
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
	</el-dialog>
</template>

<script>
import { ElLoading } from 'element-plus';
import { couponApi, userList } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { handleDownloadByName } from '/@/utils/utils';

const CouponApi = couponApi();
let start_page = 1; // 导出数据默认页数
let start_page_total = 1; // 导出数据订单总页数
export default {
	data() {
		return {
			title: '优惠券使用记录',
			open: false,
			showSearch: true,
			queryParams: {
				pageNum: 1,
				pageSize: 20,
				start_time: '',
				end_time: '',
				user_id: '',
				order_sn: '',
				coupon_id: '',
				start_page: 1,
				status: 0,
			},
			userIdSelect: {
				loading: true,
				options: [],
			},
			total: 0,
			tableList: [],
			loading: false,
		};
	},
	methods: {
		/********** 点击事件(on开头) **********/
		// 用户昵称获取焦点
		onUserIdFocus() {
			!this.queryParams.user_id && this._userList({ pageNum: 1, pageSize: 10 });
		},
		// 搜索
		onQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		// 重置
		onResetQuery() {
			this.$refs.queryFormRef.resetFields();
			this.onQuery();
		},
		// 导出
		onExport() {
			this.loadingExportRef = ElLoading.service({
				lock: true,
				text: '正在下载，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			this._couponUseExport(this.queryParams);
		},

		/********** 方法事件 **********/
		// 打开
		openDialog(config) {
			this.title = `「${config.row.name}」优惠券使用记录`;
			this.open = true;
			this.$nextTick(() => {
				this.$refs.queryFormRef.resetFields();
				this.queryParams.coupon_id = config.row.id;
				this.onQuery();
			});
		},
		// 搜索用户昵称
		userIdRemoteMethod(query) {
			if (query) {
				this._userList({ pageNum: 1, pageSize: 10, nickname: query });
			}
		},
		getList() {
			this.loading = true;
			this._couponUseList(this.queryParams);
		},
		// 下单时间
		formatterOrderTime(row) {
			return timeDictionary(row.order_time);
		},
    // 状态
    formatterStatus(row) {
      switch (row.status) {
        case 1:
          return '使用成功'
        case 2:
          return '使用失败'
        case 3:
          return '退款退回'
        default:
          return '未知'
      }
    },

		/********** 网络请求 **********/
		// 用户列表
		_userList(params) {
			this.userIdSelect.loading = true;
			userList(params)
				.then((res) => {
					this.userIdSelect.options = res.data.list;
					this.userIdSelect.loading = false;
				})
				.catch(() => (this.userIdSelect.loading = false));
		},
		// 优惠券使用记录
		_couponUseList(params) {
			CouponApi.couponUseList(params)
				.then((res) => {
					this.tableList = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				})
				.catch(() => (this.loading = false));
		},
		// 导出优惠券使用记录
		_couponUseExport(params) {
			if (start_page <= start_page_total) {
				CouponApi.couponUseExport(params)
					.then((res) => {
						start_page == 1 && (start_page_total = res.data.info.count_page);
						start_page++;
						handleDownloadByName(res.data.info.url, '优惠券使用记录导出', false);
						this._couponUseExport(this.queryParams);
						if (start_page >= start_page_total) {
							this.loadingExportRef.close();
							start_page = 1;
							start_page_total = 1;
						}
					})
					.catch(() => {
						this.loadingExportRef.close();
						start_page = 1;
						start_page_total = 1;
					});
			}
		},
	},
};
</script>
